<template>
    <div class="home">
      <div class="container">
        <header-bar :title="this.$store.state.title"></header-bar>
        <router-view class="views"/>
        <footer-bar></footer-bar>
      </div>
    </div>
</template>

<script>

  import Vue from 'vue';
  import HeaderBar from '@/components/HeaderBar'
  import FooterBar from '@/components/FooterBar'
  import { Field, CellGroup } from 'vant';
  Vue.use(Field);
  Vue.use(CellGroup)
    export default {
        name: "index",
        data() {
            return {

            }
        },
        components:{
          'footer-bar':FooterBar,
          "header-bar":HeaderBar
        },
        created() {
        }

    }
</script>

<style scoped lang="scss">
  .home{
    .container{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .views{
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
  }

</style>
